<template>
  <div class="login-container">
    <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-position="left" label-width="0px"
      class="demo-ruleForm login-page">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">
          登录
        </el-button>
      </el-form-item>
    
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        logining: false,
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        checked: false
      }
    },
    methods: {
      handleSubmit() {
        let that = this;
        axios({
            method: 'post',
            url: 'http://localhost:8080/book/login',
            params:{
              'name':that.ruleForm.username,
              'password':that.ruleForm.password
            }
          })
          .then(function (response) {
            console.log(response.data);
            if (response.data == true) {
              that.$store.commit("changeTK", true)
              that.$router.push({
                name: "ManageBook",
                path: '/manageBook',
                params: {}
              });
            } else {
              alert("账户不存在或者密码输入错误")
            }
          })
          .catch(function (error) {
            alert(error);
          });
      }
    }
  }
</script>

// scoped表示作用域限制在当前文件中
<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
    background: #f3ebe1;

    /* 登录框上下对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 0px auto;
    width: 350px;
    padding: 20px 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }
</style>

